<template>
  <page class="product-execu-sop">
    <div class="table-page-search-wrapper">
      <p-form layout="inline">
        <p-row :gutter="24">
          <p-col :xl="8">
            <p-form-item label="工艺路线编码">
              <p-input :value="item.processCoding" disabled />
            </p-form-item>
          </p-col>
          <p-col :xl="8">
            <p-form-item label="产品描述">
              <p-input :value="item.productname" disabled />
            </p-form-item>
          </p-col>
          <p-col :xl="8">
            <p-form-item label="产品编码">
              <p-input :value="item.productcode" disabled />
            </p-form-item>
          </p-col>
        </p-row>
      </p-form>
    </div>
    <p-button
      v-if="item.inspectFlag === 1"
      v-show="mqVisible === 1"
      type="primary"
      style="position: absolute; right: 15px; top: 95px; z-index: 5;"
      @click="toFirstCheck"
    >首检作业</p-button>

    <!--SOP预览-->
    <div v-show="mqVisible === 1">
      <p-spin :spinning="loading">
        <preview
          class="preview"
          :options="previewData" 
          :product-name="item.productname"
          :visible="previewShow" 
          ref="preview"
        />
      </p-spin>
    </div>

    <!--首检作业-->
    <component
      v-if="currentView && mqVisible !== 1"
      :is="currentView"
      :mqVisible.sync="mqVisible"
      :mqLoad.sync="mqLoad"
      :mqData.sync="mqData"
    />
  </page>
</template>

<script>
import mixins from './info-mixins'
import firstCheckMixins from './first-check-mixins'
import mesPeProcess from "@/api/mesPeProcess";
import preview from "@views/work/mesPeProcess/components/sopMake/preview/index.vue";
import { postAction } from '@/api/manage'

export default {
  mixins: [mixins, firstCheckMixins],
  components: {
    preview
  },
  watch: {
    item(val){
      if (!this.options.stationCode){
        // this.$message.error('请选择工站');  
      }else {
        this.getPreviewData();
      }
    },
    'options.stationCode'(val){
      if (!this.item.processVersion){
        // this.$message.error('请选择一个工序工单');  
      }else{
        this.getPreviewData();
      }
    },
  },
  data() {
    return {
      previewData: {},
      previewShow: false,
      loading: false,
    }
  },
  mounted() {
    if (this.item.processVersion && this.options.stationCode){
      this.getPreviewData();
    }
  },
  methods: {
    toFirstCheck() {
      if (this.item.productionNo) {
        const params = {
          mcode: this.item.productcode,
          workOrder: this.item.productionNo,
          processTwoCode: this.item.processTwoCode
        }
        postAction('/mes-quality/mesQcInspectTask/selectOneByConditions', params).then(res => {
          if (res.data) {
            this.toDetail(res.data)
          } else {
            this.$message.warning(res.msg)
          }
        })
      }
    },
    refreshPreview(){
      this.previewShow = false;
      this.$refs.preview.renderPageShow = false;
      this.$refs.preview.previewPagePicsShow = false;
      this.$refs.preview.renderPagePicsShow = false;
      setTimeout(() =>{
        this.previewShow = true;
        this.$nextTick( () =>{
          this.$refs.preview.calculateTable();
          this.$refs.preview.calculatePics('.picturesCon',true);
        })
      },10);
    },
    getPreviewData(){
      let params = {
        processCode: this.options.stationCode, // 工序编码
        routerCode: this.item.processCoding,
        version: this.item.processVersion,
      };
      const promiseApiArr = [
        {
          apiKey:'queryMesPeMakingByMainId',
          optionsKey:'siteAttr',
        },
        {
          apiKey:'queryMesPeResourcesMaintainByMainId',
          optionsKey:'sourceData',
        },
        {
          apiKey:'queryProcedureByMainId',
          optionsKey:'gramData',
        },
        {
          apiKey:'queryMesPeBomMaintenanceByMainId',
          optionsKey:'bomData',
        },
        {
          apiKey:'getSopPic',
          optionsKey:'picturesData',
        },
        {
          apiKey:'getMatterAttention',
          optionsKey:'stepData',
        },
      ];
      let promiseArr = [];
      this.loading = true;
      promiseApiArr.forEach( el =>{
        let curPromise = new Promise((resolve =>{
          mesPeProcess[el.apiKey](params).then( res =>{
            if (res.code === 0){
              const curData = res.data || [];
              resolve({
                key: el.optionsKey,
                data: curData,
              });
            }else {
              this.$message.error(res.msg);
            }
          });
        }))
        promiseArr.push(curPromise);
      });
      Promise.all(promiseArr).then((result) => {
        result.forEach( el =>{
          this.previewData[el.key] = el.data;
        });
        console.log(this.previewData)
        this.refreshPreview();
        this.loading = false;
      }).catch((error) => {
        console.log('sop error')
        console.log(error)
      })
    },
  }
}
</script>
<style lang="less">
.product-execu-sop{
  position: relative;

  .preview #renderPage .sopmake-preview-page{
    box-shadow: none;
  }
}
</style>
